<template>
	<div class="thbox">

		<van-nav-bar title="ToKen Profile" left-text left-arrow @click-left="$router.push()" @click-right="$router.push()">
			<!-- <van-icon name="search" slot="right" @click="show=true" /> -->
		</van-nav-bar>

		<div class="tft">
			<img class="txing" src="../../assets/images/txing.png" alt />
			<div class="tftright">
				<span class="tftzi">TFT</span>
			</div>
		</div>
		<!-- 基本信息 -->
		<div class="system">
			<van-cell-group>
				<van-cell class="cell-fir" style="color:#333333;font-weight: 700;" title="基本信息" />
				<van-cell title="官网：" value="http://dwdjwhjd" />
				<van-cell title="白皮书：" value="TFT 白皮书" />
				<van-cell class="ekeel" title="社区：" />
				<van-cell title="THK ekeel " />
			</van-cell-group>
		</div>

		<div class="system">
			<van-cell-group>
				<van-cell class="cell-fir" style="color:#333333; font-weight: 700;" title="基本信息" />
				<van-cell title="状态：" value="流通中" />
				<van-cell title="发行日期：" :value="tft" />
				<van-cell title="发行成本：" value="1 ebt = 2000ekt" />
			</van-cell-group>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tft: "2015-07-30"
			};
		},
		methods: {}
	};
</script>

<style lang="less" scoped>
	.van-nav-bar {
		background-color: #fbfcfd;
		.van-nav-bar__title {
			font-size: 15px;
			color: #333333;
			font-weight: 700;
		}
		.van-icon {
			font-size: 18px;
			color: #333333 !important;
		}
	}
	
	.thbox {
		background-color: #f2f4f5;
	}
	
	.van-cell:not(:last-child)::after {
		border-bottom: 0px;
	}
	
	.tft {
		height: 60px;
		display: flex;
		position: relative;
		border-bottom: 1px solid #ebedf0;
		background-color: #fff;
		.txing {
			display: inline-block;
			height: 32px;
			width: 30px;
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 30px;
		}
		.tftright {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			left: 70px;
			.tftzi {
				font-size: 16px;
				font-weight: 700;
			}
			p {
				font-size: 12px;
				color: #b3b3b3;
			}
		}
		.shanyou {
			display: inline-block;
			height: 12px;
			width: 15px;
			position: absolute;
			// left: 0;
			right: 16px;
			top: 50%;
			transform: translateY(-50%);
		}
	}
	
	.van-cell:first-child {
		padding: 15px 16px 0
	}
	
	.van-cell:nth-child(2) {
		padding: 12px 16px 0
	}
	
	.van-cell:nth-child(3) {
		padding: 12px 16px 0
	}
	
	.van-cell:nth-child(4) {
		padding: 12px 16px 20px;
		// margin-bottom: 20px;
	}
	
	.system {
		margin-top: 10px;
		//   background-color: pink;
		//   height: 200px;
		.van-hairline--top-bottom::after,
		.van-hairline-unset--top-bottom::after {
			border-width: 0;
		}
	}
	
	.system:last-child {
		.van-cell__value {
			color: #858585;
		}
	}
	
	.van-cell__title {
		color: #999999;
		font-weight: 700;
	}
	
	.cell-fir {
		.van-cell__title {
			color: #333333;
		}
	}
	
	// .van-cell__title:nth-child(1) {
	//   color: #333333;
	// }
	.van-cell__value {
		color: #007be2;
		font-weight: 700;
	}
	
	.ekeel {
		position: relative;
	}
	
	// .van-cell__title::before {
	//   content: '';
	//   position: absolute;
	//   // width: 100%;
	//   bottom: 0;
	//   border-bottom: 1px solid #ebedf0;
	//   left: 13px;
	//   right: 15px;
	// }
	.ekeel::before {
		content: '';
		position: absolute;
		// width: 100%;
		bottom: 0;
		border-bottom: 1px solid #ebedf0;
		left: 13px;
		right: 15px;
	}
</style>